<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input
          v-model="params.orderCode"
          placeholder="订单ID"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Input
          v-model="params.mobile"
          placeholder="手机号码"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Input
          v-model="params.deliveryNo"
          placeholder="物流单号"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.wishState"
          placeholder="洗护状态"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="3">待工厂收件</Option>
          <Option value="4">清洗中</Option>
          <Option value="30">已完成</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findOrderMallList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>订单列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findOrderMallList">
                <Icon type="md-refresh" size="15" />
              </Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <!--表格数据-->
      <Table
        :columns="columns"
        :data="dataList"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
      >
        <template slot-scope="{ row, index }" slot="orderState">
          <span v-if="row.orderState == 3">待工厂收件</span>
          <span v-if="row.orderState == 4">清洗中</span>
          <span v-if="row.orderState == 30">已完成</span>
          <span v-if="row.orderState == 12">返回待揽收</span>
        </template>
        <template slot-scope="{ row, index }" slot="warningStatus">
          <div v-if="row.warningStatus == 1" class="circle circle-1"></div>
          <div v-if="row.warningStatus == 2" class="circle circle-2"></div>
          <div v-if="row.warningStatus == 3" class="circle circle-3"></div>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="info"
            size="small"
            ghost
            style="margin-right: 5px"
            @click="showOrderOpe(row)"
          >
            查看
          </Button>
          <Button
            type="info"
            size="small"
            ghost
            style="margin-right: 5px"
            @click="showFactoryRemarkClick(row)"
          >
            备注
          </Button>
          <Button
            type="info"
            size="small"
            ghost
            style="margin-right: 5px"
            @click="sendExp(row)"
            v-if="row.orderState == 4"
          >
            寄快递
          </Button>
          <Button
            type="info"
            size="small"
            ghost
            style="margin-right: 5px"
            @click="cancelExp(row)"
            v-if="row.orderState == 13"
          >
            取消快递
          </Button>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <order-ope ref="orderOpe"></order-ope>
    <Modal
      v-model="showExp"
      :title="expTitle"
      @on-cancel="hideExp"
      @on-ok="confirmExp"
      :mask-closable="false"
      width="450"
    >
      {{ expDesc }}
    </Modal>
     <Modal
      v-model="showFactoryRemark"
      title="备注"
      @on-cancel="showFactoryRemark = false"
      @on-ok="showFactoryRemarkConfirm"
      :mask-closable="false"
      width="450"
    >
      <Input v-model="factoryRemark"></Input>
    </Modal>
  </div>
</template>

<script>
  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import orderOpe from './components/order-ope';
  import orderLogisticsTracking from './components/order-logistics-tracking';
  import orderLogisticsNumber from './components/order-logistics-number';
  import orderCustomRefund from './components/order-custom-refund';

  export default {
    name: 'admin',
    data() {
      return {
        showFactoryRemark: false,
        currentRow: {},
        factoryRemark: '',
        showExp: false,
        total: 0,
        importSuccess: 0,
        importFailed: 0,
        isTableLoading: false,
        isShowImport: false,
        action: this.$apiURL + '/orderMall/importOrderExcel',
        headers: {
          token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
        },
        // 参数
        params: {
          page: 1,
          rows: 10,
          orderState: '',
          wishState: '',
          mobile: '',
          deliveryNo: '',
          orderCode: ''
        },
        // 表格列
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '订单ID',
            minWidth: 120,
            key: 'orderCode'
          },
          {
            title: '手机号码',
            minWidth: 190,
            key: 'mobile'
          },
          {
            title: '商品名称',
            minWidth: 190,
            key: 'goodsName',
            ellipsis: true
          },
          {
            title: '清洗件数',
            minWidth: 120,
            key: 'goodsNum'
          },
          {
            title: '收衣时间',
            minWidth: 120,
            key: 'arrivalTime'
          },
          {
            title: '洗护状态',
            minWidth: 120,
            slot: 'orderState'
          },
          {
            title: '预警',
            minWidth: 120,
            slot: 'warningStatus'
          },
          { title: '操作', minWidth: 240, slot: 'action' }
        ],
        failOrderData: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '洗衣管理', url: '', icon: '', size: 0 },
          { name: '工厂订单', url: '', icon: '', size: 0 }
        ],
        dataList: [],
        expType: 'send',
        orderCode: ''
      };
    },
    computed: {
      expTitle() {
        return this.expType == 'send' ? '寄快递' : '取消寄件';
      },
      expDesc() {
        return this.expType == 'send'
          ? '确保物品已洗护并打包好，以便物流人员揽收'
          : '确定取消寄件';
      }
    },
    created() {
      if (this.$route.query.orderCode) {
        this.params.orderCode = this.$route.query.orderCode;
      }
      // 订单-列表查询
      this.findOrderMallList();
    },
    methods: {
      confirmExp() {
        if (this.expType == 'send') {
          this.confirmSendExp();
        } else {
          this.confirmCancelExp();
        }
      },
      hideExp() {
        this.showExp = false;
      },
      cancelExp(row) {
        this.expType = 'cancel';
        this.orderCode = row.orderCode;
        this.showExp = true;
      },
      sendExp(row) {
        this.expType = 'send';
        this.orderCode = row.orderCode;
        this.showExp = true;
      },
      confirmSendExp() {
        console.log(this.orderCode);
        this.axios
          .get('/factory/order/delivery', {
            params: { orderCode: this.orderCode }
          })
          .then(res => {
            this.findOrderMallList();
          });
      },
      confirmCancelExp() {
        this.axios
          .get('/factory/order/cancelDelivery', {
            params: { orderCode: this.orderCode }
          })
          .then(res => {
            this.findOrderMallList();
          });
      },
      checkHour(arrivalTime) {
        if (!arrivalTime) {
          return 1;
        }
        const arrivalTimeNum = new Date(arrivalTime).getTime();
        const nowNum = new Date().getTime();
        const diffHours = (arrivalTimeNum - nowNum) / (1000 * 60 * 60);
        let warningStatus = 0;
        if (diffHours < 24) {
          warningStatus = 1;
        } else if (diffHours < 48) {
          warningStatus = 2;
        } else {
          warningStatus = 3;
        }
        return warningStatus;
      },
      // 订单-列表查询
      findOrderMallList() {
        this.isTableLoading = true;
        this.axios
          .post('/factory/order/findOrderMallList', this.params)
          .then(res => {
            console.log(res);
            this.isTableLoading = false;
            if (res.status == 200) {
              this.total = res.data.total;
              this.dataList = res.data.rows.map(item => {
                item.arrivalTime = '2024-02-02 12:20:00';
                return {
                  warningStatus: this.checkHour(item.arrivalTime),
                  ...item
                };
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查询订单列表接口报错',
                duration: 0
              });
            }
          });
      },
      // 显示操作模态框
      showOrderOpe(row) {
        this.$refs.orderOpe.show(row);
      },

      // 是否取消订单
      isOrderCancel(row) {
        this.$Modal.confirm({
          title: `是否取消当前订单？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.orderCancel(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      showFactoryRemarkClick(row) {
        this.showFactoryRemark = true
        this.currentRow = row
      },
      showFactoryRemarkConfirm(val) {
        console.log(val, this.factoryRemark, this.currentRow)
         this.axios
          .post('/factory/order/factoryRemark', {
            factoryRemark: this.factoryRemark,
            orderCode: this.currentRow.orderCode
          }).then(res => {
            this.$Message.success('备注成功.');
          })
      },
      // 是否删除订单
      isDeleteOrderMall(row) {
        // console.log(row)
        this.$Modal.confirm({
          title: `是否删除当前订单？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.deleteOrderMall(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 取消订单
      orderCancel(row) {
        this.$Spin.show();
        this.axios
          .post('/orderMall/orderCancel', {
            mallOrderId: row.mallOrderId
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.findOrderMallList();
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '取消订单接口报错',
                duration: 0
              });
            }
          });
      },
      // 删除订单
      deleteOrderMall(row) {
        this.$Spin.show();
        this.axios
          .post('/orderMall/deleteOrderMall', {
            mallOrderId: row.mallOrderId
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.findOrderMallList();
            }
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除订单失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除订单接口报错',
                duration: 0
              });
            }
          });
      },
      // 导出订单Excel
      exportExcel() {
        this.$Spin.show();
        this.axios
          .post('/orderMall/exportExcel', this.params, {
            responseType: 'arraybuffer'
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            //
            let blob = new Blob([res], { type: 'Files' });
            let csvUrl = URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.href = csvUrl;
            // 下载xlsx文件
            link.download = '商品订单列表.xls';
            link.click();
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除订单失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除订单接口报错',
                duration: 0
              });
            }
          });
      },
      // 显示操作模态框
      showOrderOpe(row) {
        this.$refs.orderOpe.show(row);
      },
      // 重置筛选条件
      resetScreen() {
        this.params.deliveryNo = '';
        this.params.mobile = '';
        this.params.orderState = '';
        this.params.wishState = '';
        
        this.params.orderCode = '';
      },
      // 改变页数
      changePage(e) {
        this.params.page = e;
        this.findOrderMallList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.findOrderMallList();
      }
    },
    components: {
      hsBreadcrumb,
      orderOpe,
      orderLogisticsTracking,
      orderLogisticsNumber,
      orderCustomRefund
    }
  };
</script>

<style scoped lang="less">
  .circle {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    &-1 {
      background-color: #19be6b;
    }
    &-2 {
      background-color: #f90;
    }
    &-3 {
      background-color: crimson;
    }
  }
  .hs-upload-image-box {
    width: 485px;
    display: flex;
    align-items: center;
    justify-content: center;

    .hs-upload-add {
      cursor: pointer;
      width: 100%;
      height: 43px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #cccccc;
      transition: all 0.3s;

      &:hover {
        color: #2d8cf0;
        border: 1px dashed #2d8cf0;
      }
    }
  }
  .z-import-message {
    margin: 10px 0;
  }
</style>
